<!-- 统计面板 -->
<template>
  <ele-modal
    :width="700"
    :destroy-on-close="true"
    v-model="visible"
    :title="'就业统计-'+title"
    :loading="loading">
    <el-row :gutter="20" style="padding-top: 15px;">
      <el-col :span="12">
        <div class="box-css">
          <div class="box-css-img">
            <img src="@/assets/019-data analytics.png" alt="分系别统计" width="36"/>
          </div>
          <div class="box-css-text" @click="goDepartmentReport">
            分系别统计
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="box-css">
          <div class="box-css-img">
            <img src="@/assets/040-binders.png" alt="分专业别统计" width="36"/>
          </div>
          <div class="box-css-text" @click="goMajorReport">
            分专业别统计
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="box-css">
          <div class="box-css-img">
            <img src="@/assets/033-profile.png" alt="分总支统计" width="36"/>
          </div>
          <div class="box-css-text" @click="goGroupReport">
            分总支统计
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="box-css">
          <div class="box-css-img">
            <img src="@/assets/069-video call.png" alt="分辅导员别统计" width="36"/>
          </div>
          <div class="box-css-text" @click="goCounsellorReport">
            分辅导员别统计
          </div>
        </div>
      </el-col>
    </el-row>
    <template #footer>
      <el-button @click="handleCancel">关闭</el-button>
    </template>
  </ele-modal>
</template>


<script setup>
import {ref, reactive, watch} from 'vue';
import {EleMessage} from 'ele-admin-plus';
import {
  parseTime
} from '@/utils/linyang.js';

import {selectReportInfo} from '@/api/manage/statistic/admin/fileInfo'

const props = defineProps({
  /** 修改回显的数据 */
  data: Object
});

const emit = defineEmits(['done']);


/** 弹窗是否打开 */
const visible = defineModel({type: Boolean});


/** 提交状态 */
const loading = ref(false);


const title = ref(null);

/** 关闭弹窗 */
const handleCancel = () => {
  visible.value = false;
};

//console.log(props.data);


const goDepartmentReport = () => {
  window.open(reportContainer.value.reportBaseUrl + reportContainer.value.dailyDepartmentEmploymentStatisticsReport + reportContainer.value.reportNoPage + "&year=" + props.data.fileYear + "&date=" + props.data.fileTime);
}

const goMajorReport = () => {
  window.open(reportContainer.value.reportBaseUrl + reportContainer.value.dailyMajorEmploymentStatisticsReport + reportContainer.value.reportNoPage + "&year=" + props.data.fileYear + "&date=" + props.data.fileTime);
}


const goGroupReport = () =>{
  window.open(reportContainer.value.reportBaseUrl + reportContainer.value.dailyGroupEmploymentStatisticsReport + reportContainer.value.reportNoPage + "&year=" + props.data.fileYear + "&date=" + props.data.fileTime);
}


const goCounsellorReport = () =>{
  window.open(reportContainer.value.reportBaseUrl + reportContainer.value.dailyCounsellorEmploymentStatisticsReport + reportContainer.value.reportNoPage + "&year=" + props.data.fileYear + "&date=" + props.data.fileTime);
}



const reportContainer = ref({});


/** 监听弹窗打开 */
watch(visible, () => {
  if (visible.value) {
    console.log(props.data);
    title.value = parseTime(props.data.fileTime, "{y}年{m}月{d}日");

    //获取报表链接
    selectReportInfo().then(res => {
      console.log(res);
      reportContainer.value = res.data;
    });

  }
});

</script>

<style scoped>
.box-css {
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;
  padding-left: 5px;
  padding-top: 20px;
  padding-bottom: 20px;
  display: flex;

  .box-css-img {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 15px;
  }

  .box-css-text {
    font-size: 15px;
    font-weight: bold;
    padding-left: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
}

.box-css:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}
</style>
